<template>
    <div class="manage">
      <el-dialog
            title="教师详情"
            :visible.sync="detailsInfo"
            width="50%">
            <div class="big">
              <div class="small-top">
              <div class="top-l"><img style="width:100%;height:100%" :src="evUrl+infoDeatils.t_pic" alt="404" title="头像"/></div>
              <div class="top-r">
                <div>账号：{{infoDeatils.t_username}}</div>
                <div>密码：{{infoDeatils.t_password}}</div>
              </div>
              </div>
              <div class="small-bottom">
                <div>姓名：{{infoDeatils.t_real_name}}</div>
                <div>手机号码：{{infoDeatils.t_phone}}</div>
                <div>电子邮箱：{{infoDeatils.t_email}}</div>
                <div>性别：{{infoDeatils.t_sex}}</div>
                <div>生日：{{infoDeatils.birth}}</div>
                <div>民族：{{infoDeatils.native_place}}</div>
                <div>专业：{{infoDeatils.major}}</div>
                <div>支教次数：{{infoDeatils.t_count}}</div>
                <div>毕业院校：{{infoDeatils.t_university}}</div>
                <div>电子邮箱：{{infoDeatils.t_email}}</div>
                <div>地址：{{infoDeatils.t_addr}}</div>
                <el-button size="mini" style="background:green;color:#fff" v-if="infoDeatils.my_notes" @click="seeNote">查看简历</el-button>
              </div>
            </div>
      </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            <!-- 用户的表单信息 -->
            <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
                <el-form-item label="账号" prop="t_username">
                    <el-input :disabled="flagValue" placeholder="请输入账号" v-model="form.t_username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="t_password">
                    <el-input placeholder="请输入密码" v-model="form.t_password"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="t_real_name">
                    <el-input placeholder="请输入真是姓名" v-model="form.t_real_name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="t_phone">
                    <el-input placeholder="请输入手机" v-model="form.t_phone"></el-input>
                </el-form-item>
                <!-- <el-form-item label="地址" prop="t_addr">
                    <el-input placeholder="请输入地址" v-model="form.t_addr"></el-input>
                </el-form-item> -->
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button  type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        <div class="manage-header">
          <div class="header-left">
            <el-button v-if="a_role==1" size="medium"  @click="handleAdd" type="primary">
                + 新增
            </el-button>
            <el-upload
                ref="s_upload"
                class="upload-demo"
                :show-file-list="false"
                :action="evUrl+'zj/uploadTeacher'"
                :on-success="handleFileSuccess"
                :limit="1">
         <el-button v-if="a_role==1" size="medium" style="margin:0 10px;" type="primary" plain >+ 导入</el-button>
          </el-upload>
         <el-button size="medium" type="primary" plain @click="handlerOut">+ 导出</el-button>
         <el-button v-if="a_role==1" size="medium" type="danger" style="padding:0;" @click="deleteAll">+ 批量删除</el-button>
          </div>
            <!-- form搜索区域 -->
            <el-form :inline="true" :model="userForm" style="height:40px;">
                <el-form-item>
                    <el-input placeholder="请输入名称" v-model="userForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
                        <!-- :row-style="{height:'35px'}"
                :cell-style="{padding: '0'}" -->
        <div class="common-tabel">
            <el-table
                stripe
                border
                height="95%"
                :data="tableData"
                style="width: 100%"
                size:small

                :cell-style="{textAlign:'center',padding:'7px'}"
                :header-cell-style="{background:'#87CEFA',color:'#ffffff',textAlign:'center',padding:'7px'}"
                @selection-change="handleSelectionChange">
                <el-table-column
                 type="selection"
                 width="55">
                </el-table-column>
                <el-table-column
                    prop="t_username"
                    label="账号">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="t_password"
                    label="密码">
                </el-table-column>
                <el-table-column
                    prop="t_real_name"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    prop="t_phone"
                    label="手机号码">
                </el-table-column>
                <!-- <el-table-column
                    show-overflow-tooltip
                    prop="t_addr"
                    label="地址">
                </el-table-column> -->
                <el-table-column
                    label="操作"
                    width="258">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleDetailsInfo(scope.row)">查看</el-button>
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button v-if="a_role==1" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pager">
                <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page.sync="pageData.page"
                 :page-sizes="[10, 20, 30, 40]"
                 :page-size="pageData.limit"
                 layout="sizes, prev, pager, next"
                 :total="total">
    </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>

import { getTeacherList, addTeacher, upTeacher, delTeacher } from '../api'
import { deleteAll } from '../api/handleAll'
export default {
  data () {
    return {
      evUrl: this.$evUrl,
      dialogVisible: false,
      detailsInfo: false,
      flagValue: false,
      form: {
        t_password: '',
        t_real_name: '',
        t_username: '',
        t_phone: ''

      },
      infoDeatils: {},
      a_role: 0,
      rules: {
        t_username: [
          { required: true, message: '请输入账号' }
        ],
        t_password: [
          { required: true, message: '请输入密码' }
        ],
        t_real_name: [
          { required: true, message: '请输入真实姓名' }
        ],
        t_phone: [
          { required: true, message: '请输入手机号码' }
        ]
      },
      tableData: [],
      modalType: 0, // 0表示新增的弹窗， 1表示编辑
      total: 0, // 当前的总条数
      pageData: {
        page: 1,
        limit: 10
      },
      userForm: {
        name: ''
      },
      multipleSelection: {
        subMultipleSelection: [],
        role: '1'
      }
    }
  },
  methods: {
    // seeNote
    seeNote () {
      // console.log(this.infoDeatils)
      window.open(this.evUrl + this.infoDeatils.my_notes)
    },
    // 教师详情
    handleDetailsInfo (row) {
      this.infoDeatils = row
      this.detailsInfo = true
    },
    // 提交用户表单
    submit () {
      this.$refs.form.validate((valid) => {
        // console.log(valid, 'valid')
        if (valid) {
          // 后续对表单数据的处理
          if (this.modalType === 0) {
            // console.log(this.form)
            addTeacher(this.form).then(({ data }) => {
              // console.log(data)
              // 重新获取列表的接口
              if (data.status === -888) {
                this.$message.info('用户名存在')
              }
              if (data.status === 200) {
                this.$message.success('添加成功')
                // 清空表单的数据
                this.$refs.form.resetFields()
                // 关闭弹窗
                this.dialogVisible = false
                this.getTeacher()
              }
            })
          } else {
            upTeacher(this.form).then(() => {
              // 重新获取列表的接口
              this.$message.success('修改成功')
              this.getTeacher()
            })
            // 清空表单的数据
            this.$refs.form.resetFields()
            // 关闭弹窗
            this.dialogVisible = false
          }
        }
      })
    },
    // 导入xlsx打印文件上传成功返回的数据
    handleFileSuccess (response, file, fileList) {
      // console.log('hello', response)
      // console.log('guigigiug')
      this.getTeacher()
      this.$refs.s_upload.clearFiles()
      this.$message.success(response.message)
    },
    // 弹窗关闭的时候
    handleClose () {
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    cancel () {
      this.handleClose()
    },
    handleEdit (row) {
      this.modalType = 1
      this.flagValue = true
      this.dialogVisible = true
      // 注意需要对当前行数据进行深拷贝，否则会出错
      this.form = JSON.parse(JSON.stringify(row))
      // console.log(row)
    },
    handleDelete (row) {
      // console.log(row.t_id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {
        delTeacher({ id: row.t_id }).then(({ data }) => {
          if (data.status === 200) {
            // 重新获取列表的接口
            // console.log('111111111')
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getTeacher()
          } else {
            this.$message({
              type: 'error',
              message: data.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAdd () {
      this.form.t_password = ''
      this.form.t_real_name = ''
      this.form.t_username = ''
      this.form.t_phone = ''
      this.modalType = 0
      this.flagValue = false
      this.dialogVisible = true
    },
    // 获取列表的数据
    getTeacher () {
      // 获取的列表的数据
      // getUser({ params: { ...this.userForm, ...this.pageData } }).then(({ data }) => {
      //   console.log(data)
      //   this.tableData = data.list

      //   this.total = data.count || 0
      // })
      this.pageData.token = window.localStorage.getItem('token')
      getTeacherList({ params: { ...this.pageData, ...this.userForm } }).then(({ data }) => {
        this.tableData = data.list
        // console.log('数据', data)
        this.total = data.count || 0
        // console.log(data)
      })
    },
    // 选择页码的回调函数
    handleCurrentChange (val) {
      // console.log(val, 'val')
      this.pageData.page = val
      this.getTeacher()
    },

    // 全选获取值
    handleSelectionChange (val) {
      this.multipleSelection.subMultipleSelection = val
      // console.log(this.multipleSelection.subMultipleSelection)
    },

    // 页码
    handleSizeChange (val) {
      this.pageData.limit = val
      this.getTeacher()
    },
    // 列表的查询
    onSubmit () {
      this.getTeacher()
    },
    // 导出数据为文件
    handlerOut () {
      // console.log(this.multipleSelection.subMultipleSelection)
      if (!this.multipleSelection.subMultipleSelection.length > 0) {
        this.$message.error('清选择要导出数据')
        return
      }
      const dataArr = []
      this.multipleSelection.subMultipleSelection.forEach(item => {
        const obj = {}
        for (const key in item) {
          if (key === 't_username') {
            obj['账号'] = item[key]
          } else if (key === 't_password') {
            obj['密码'] = item[key]
          } else if (key === 't_real_name') {
            obj['姓名'] = item[key]
          } else if (key === 't_phone') {
            obj['手机号码'] = item[key]
          } else if (key === 't_addr') {
            obj['联系地址'] = item[key]
          } else if (key === 't_sex') {
            obj['性别'] = item[key]
          } else if (key === 'birth') {
            obj['出生日期'] = item[key]
          } else if (key === 'major') {
            obj['专业'] = item[key]
          } else if (key === 'native_place') {
            obj['民族'] = item[key]
          } else if (key === 't_count') {
            obj['支教次数'] = item[key]
          } else if (key === 't_email') {
            obj['电子邮箱'] = item[key]
          } else if (key === 't_university') {
            obj['毕业院校'] = item[key]
          }
        }
        dataArr.push(obj)
      })
      // console.log('格式化数据', dataArr)
      this.$excels.exportExcel('教师名单表.xlsx', dataArr)
      this.$message.success('导出成功')
    },
    // 批量删除
    deleteAll () {
      deleteAll(this.multipleSelection).then(({ data }) => {
        this.$message.info(data.message)
        this.getTeacher()
      })
    }
  },
  mounted () {
    this.a_role = JSON.parse(localStorage.getItem('userInfo')).a_role
    this.getTeacher()
    // this.$refs.upload.clearFiles()
  }
}
</script>
<style lang="less" scoped>
.manage {
    height: 90%;
    .manage-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        .header-left{
          display: flex;
          .el-button{
            padding: 10px 10px;
          }
        }
    }
    .common-tabel {
        position: relative;
        height: calc(100% - 0px);
        .pager {
            position: absolute;
            // bottom: -8px;
            right: 20px;
            background-color: #ffffff;
        }
    }
    .big{
      width: 100%;
      height:100%;
      // background: red;
      .small-top{
        display: flex;
        justify-content: start;
        width: 100%;
        height: 80px;
        padding:10px 20px;
        .top-l{
          width: 80px;
          height:100%;
          margin-right: 18px;
          // background:blue;
        }
        .top-r{
          font-size:18px;
          height:100%;
          // background:blue;
          div{
          margin-bottom:5px;
        }
        }
      }
      .small-bottom{
        font-size:18px;
        padding:10px 20px;
        div{
          margin-bottom:5px;
        }

      }
    }
}
</style>
